<script setup lang="ts">
import { ref,defineEmits,onUnmounted } from "vue"
const emit = defineEmits(['changeHeaderCSS']);
const changeHeaderCSS = (flag:boolean)=>{
  emit('changeHeaderCSS',flag);
}
const underHeader = ref();
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  underHeader,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)      
      if (browerWidth < 1200) {
        changeHeaderCSS(true)
      }
    } else {
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
const listener = ()=>{
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if(browerWidth < 1200 ){
    //头部菜单变为图标
    changeHeaderCSS(true)
  }else{
    // 头部图标变为菜单
    changeHeaderCSS(false)
  }
}
window.addEventListener('resize',listener);
onUnmounted(()=>{
  window.removeEventListener('resize',listener);
})
</script>

<template>
  <div ref="underHeader"></div>
  <div class="case-main" >
    <div class="box">
      <el-row >
        <el-col :span="10" :xs="24" :sm="24" :md="10" class="font-center"  style="margin-bottom: 40px;">
          <div>
            <span class="ft30 fw3">CONTACT US</span>
          </div>
        </el-col>
        <el-col :span="14" :xs="24" :sm="24" :md="14" >
          <div class="black">
            <p class="mb40 ft16 lnh">很荣幸, 因为有你的关注。同时, 恭喜你, 你可能和一家真正专业的公司有合作的机会。因此, 了解以下的合作原则, 对于彼此的共事质量很重要, 了解我们的行事方法和思想, 能在今后的合作中更加默契, 提高效能。 彼此协助, 彼此信任, 方能将美好的蓝图兑现。</p>
            <p class="title-1 ft18">抖酷品牌咨询与设计</p>
            <p class="mb40 ft16">DOUKU BRAND SONSULTING AND DESIGN</p>
            <p class="lnh"><strong>Add :</strong>  &nbsp;&nbsp;北京市大兴区新源大街27号院4号楼-104室</p>
            <p class="lnh"><strong>Tel :</strong>  &nbsp;&nbsp;17600150448</p>
            <p class="mb40 lnh"><strong>E-mail :</strong>  &nbsp;&nbsp;864963152@qq.com</p>
            <!-- 地图 -->
            <div class="mb40 bg-img"></div>
            <p class="lnh2"><strong>使命:</strong> &nbsp;&nbsp;为创新而生、为不凡努力</p>
            <p class="lnh2"><strong>愿景:</strong> &nbsp;&nbsp;成为全球一流的品牌咨询设计公司</p>
            <p class="lnh2"><strong>经营理念:</strong> &nbsp;&nbsp;提升品牌价值，为客户驱动商业可持续增长</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mb20{
  margin-bottom: 20px;
}
.lnh2{
  line-height: 1.8;
}
.lnh{
  line-height: 1.5;
}
.box {
  padding: 80px 0 80px;
  max-width: 1400px;
  margin: 0 auto;
}
.bg-img{
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  background-size: cover;
  background-image: url("../assets/map.png");
}
.case-main{
  padding: 100px 2.5% 100px;
}

@media screen and (max-width: 1200px) {
  .case-main{
    padding-top: 0;
    padding-bottom: 0;
  }
  .box{
    padding-top: 50px;
  }
  .warp-type-list,.active {
    font-size: 12px;
  }
}

</style>